How to Create Neobrutalism Sign-up Form Using HTML and CSS Only

Faraz

By Faraz - Last Updated:

In this tutorial, you will learn how to create a Neobrutalism style sign-up form using HTML and CSS only.

Join us on Telegram
how to create neobrutalism sign-up form using html and css only.jpg
Read Alsocreate a responsive customer review using HTML and CSS.webpCreate a Responsive Customer Review Using HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Neubrutalism, or Neobrutalism as some call it, is a mix of standard Brutalism in web design and more modern typography, illustration, and animation standards. In this tutorial, we'll create a signup form in neobrutalism style using HTML and CSS.

Before we dive into the tutorial, let's discuss what Neobrutalism web design is and why we need a sign-up form for our website. Neobrutalism is a web design style that embraces a raw and minimalistic approach, with a touch of modern elements. It's characterized by the use of monochromatic colors, simple typography, and bold and large-scale graphics. A sign-up form is a crucial element of a website, allowing visitors to register for a service or subscribe to a newsletter.

Watch full tutorial on my YouTube Channel: Watch here.

Let's start making an amazing Neobrutalism Sign-up Form using HTML and Pure CSS step by step.

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Neobrutalism Sign Up Form.

Breaking Down the Code

1. HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
  • Declares the document type as HTML5.
  • <html lang="en"> specifies the language as English.

2. <head> Section

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Neobrutalism Sign-up Form</title>
</head>
  • <meta charset="UTF-8">: Supports special characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures compatibility with Internet Explorer (IE).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the page responsive on all devices.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) for styling.
  • <title>: Sets the title of the webpage.

3. <body> Section

<body class="container">
  • The <body> contains the main content of the form.
  • class="container": Likely used in CSS to style the body.

4. The Sign-Up Form

<div class="form_area">
    <h4 class="title">SIGN UP</h4>
  • The form is wrapped inside <div class="form_area"> to group the elements.
  • <h4 class="title">SIGN UP</h4> is the form title.

5. Input Fields

Each field is inside a <div class="form_group"> to structure the form properly.

Name Input Field

<div class="form_group">
    <label for="name" class="sub_title">Name</label>
    <input type="text" class="form_style" id="name" placeholder="Enter your full name">
</div>
  • <label>: Describes the input field for accessibility.
  • <input type="text">: Accepts text input.
  • placeholder="Enter your full name": Provides a hint inside the field.

Email Input Field

<div class="form_group">
    <label for="email" class="sub_title">Email</label>
    <input type="email" class="form_style" id="email" placeholder="Enter your email" />
</div>
  • <input type="email">: Accepts only valid email addresses.

Password Input Field

<div class="form_group">
    <label for="password" class="sub_title">Password</label>
    <input type="password" class="form_style" id="password" placeholder="Enter your password" /> 
</div>
  • <input type="password">: Hides the password when typed.

6. Sign-Up Button & Login Link

<div>
    <button class="btn">SIGN UP!</button>
    <p>Have an Account? <a href="" class="link">Login Here!</a></p>
</div>
  • <button class="btn">SIGN UP!</button>: Sign-up button.
  • <p>Have an Account? <a href="" class="link">Login Here!</a></p>:
  • Provides a login link for users who already have an account.

After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.

Read AlsoCreate Typing Effect HTML, CSS, JavaScript Tutorial.jpgCreate Typing Effect: HTML, CSS, JavaScript Tutorial

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create neobrutalism effect. Below is a breakdown of each section:

1. Importing Google Font

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
  • This imports the Poppins font from Google Fonts.
  • The font is available in different weights (400 to 900).

2. Resetting Default Styles

*{
    margin: 0;
    padding: 0;
}
  • Removes default margin and padding from all elements for consistent spacing.

3. Body Styling

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    background: #7b4397;
}
  • Uses Poppins font for the entire page.
  • Sets height and width to 100% of the viewport.
  • Background color is #7b4397 (a purple shade).

4. Centering the Form

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
  • Uses Flexbox to center elements both horizontally and vertically.
  • flex-direction: column; stacks items vertically.
  • text-align: center; ensures text is centered.

5. Styling the Form Box

.form_area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    height: auto;
    width: auto;
    border-radius: 20px;
    box-shadow: 30px 35px 2px #52206b;
}
  • The form box has:
  • White background (#fff).
  • Rounded corners (border-radius: 20px).
  • Shadow effect (box-shadow: 30px 35px 2px #52206b).

6. Title Styling

.title{
    color: #7b4397;
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 20px;
}
  • Bold (900 weight) and large text for "SIGN UP".
  • Uses the same purple color as the background.

7. Label Styling

.sub_title{
    font-weight: 600;
    margin: 5px 0;
}
  • Labels (Name, Email, Password) have:
  • Semi-bold text (600 weight).
  • Small margin for spacing.

8. Input Field Styling

.form_group{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 20px;
}

.form_style{
    outline: none;
    border: 2px solid #000;
    box-shadow: 3px 4px 0px 1px #000;
    width: 290px;
    padding: 12px 10px;
    border-radius: 4px;
    font-size: 15px;
}
  • .form_group:
    • Organizes form fields vertically.
    • Uses margin: 20px; for spacing.
  • .form_style (Input Fields):
    • Black border (border: 2px solid #000).
    • Box shadow for 3D effect (box-shadow: 3px 4px 0px 1px #000)**.
    • Fixed width (290px) and rounded corners (border-radius: 4px).

9. Input Focus Effects

.form_style:focus, .btn:focus{
    transform: translateY(4px);
    box-shadow: 1px 2px 0px 0px #000;
}
  • When an input field or button is focused (clicked):
    • Moves down by 4px (transform: translateY(4px);).
    • Reduces box shadow to give a pressed effect.

10. Button Styling

.btn{
    padding: 15px;
    margin: 30px 0px;
    width: 310px;
    font-size: 15px;
    background: #7b4397;
    border-radius: 30px;
    font-weight: 800;
    box-shadow: 5px 5px 0px 0px #000;
}
  • Rounded button (border-radius: 30px).
  • Purple background (#7b4397).
  • Bold text (font-weight: 800).
  • Shadow effect (box-shadow: 5px 5px 0px 0px #000).

11. Paragraph and Link Styling

p{
    margin: 20px 0px;
}
.link{
    font-weight: 800;
}
  • Adds margin for spacing around <p>.
  • The Login link (<a>) is bold.

This will give our neobrutalism sign-up form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Poppins', sans-serif;
    height: 100vh;
    width: 100vw;
    background: #7b4397;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.form_area{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    height: auto;
    width: auto;
    border-radius: 20px;
    box-shadow: 30px 35px 2px #52206b;
}

.title{
    color: #7b4397;
    font-weight: 900;
    font-size: 1.5em;
    margin-top: 20px;
}

.sub_title{
    font-weight: 600;
    margin: 5px 0;
}

.form_group{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    margin: 20px;
}

.form_style{
    outline: none;
    border: 2px solid #000;
    box-shadow: 3px 4px 0px 1px #000;
    width: 290px;
    padding: 12px 10px;
    border-radius: 4px;
    font-size: 15px;
}

.form_style:focus, .btn:focus{
    transform: translateY(4px);
    box-shadow: 1px 2px 0px 0px #000;
}

.btn{
    padding: 15px;
    margin: 30px 0px;
    width: 310px;
    font-size: 15px;
    background: #7b4397;
    border-radius: 30px;
    font-weight: 800;
    box-shadow: 5px 5px 0px 0px #000;
}

p{
    margin: 20px 0px;
}

.link{
    font-weight: 800;
}

Final Output:

how to create neobrutalism sign-up form using html and css only.gif
Read Alsopure css card design using html and css.pngHow to Create Pure CSS Card Design Using HTML and CSS

Conclusion:

In this tutorial, you've learned how to create a Neobrutalism-style sign-up form using HTML and CSS only. You've learned how to create the HTML structure of the form, style it using CSS, and implement form validation. With these skills, you can create a stylish and simple sign-up form that fits perfectly with your website's design. Keep practicing and experimenting with different designs to create a unique and modern sign-up form.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: neobrutalism, sign-up form, html, css, neobrutalism web design, create sign-up form using html and css, html form design, css form design, neobrutalism style sign-up form, registration form
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺